header {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  padding: 10px 20px;
  background-color: #f3f3f3;
  border-bottom: solid 1px #ddd;
  row-gap: 12px;
  & > section {
    display: grid;
    grid-template-columns: 30px auto 20px;
    gap: 5px;
    align-items: center;
    > [class*='fa-home'] {
      color: #f39c12;
      font-size: 25px;
    }
    > .input {
      display: grid;
      grid-template-columns: 25px auto;
      border: solid 1px #ddd;
      padding: 6px;
      background-color: white;
      > i {
        justify-self: center;
      }
      input {
        border: none;
        outline: none;
      }
    }
    > .user {
      justify-self: end;
      & > i {
        font-size: 20px;
      }
    }
  }

  & > nav {
    display: grid;
    grid-template-columns: auto 50px;
    .links {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      align-items: center;
      a {
        text-decoration: none;
        color: #999;
        font-size: 15px;
        position: relative;
        &.active {
          color: #e67e22;
          &::after {
            content: '';
            position: absolute;
            display: block;
            height: 2px;
            background-color: #e67e22;
            width: 32px;
            bottom: -5px;
          }
        }
      }
    }

    .icon {
      display: grid;
      justify-items: end;
      align-items: center;
    }
  }
}
